<template>
  <div class="spl-container salaryRules-container emp-baseSetting-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-tabs" style="padding-top: 3px;">
      <el-tabs v-model="active" type="card">
        <el-tab-pane label="算薪设置" name="tab0">
          <div class="salaryRules">
            <div class="yellow-border-bg">
              <i class="el-icon-warning ic-tip-yellow"></i>
              请仔细核对数据后在执行保存更新。保存后的数据即刻生效。
            </div>
            <div style="width: 86%; margin-left: 7%;" class="mt-40">
              <el-form :model="saveFormData" ref="saveFormData" label-width="150px">
                <!--<el-row>-->
                <!--<el-form-item label="考勤周期:" prop="weekend" :rules="[{ required: true, message: '请选择考勤周期'}]">-->
                <!--<el-select v-model="setSalaryForm.weekend" placeholder="请选择" class="w-250">-->
                <!--<el-option label="周期一" value="shanghai"></el-option>-->
                <!--<el-option label="周期二" value="beijing"></el-option>-->
                <!--</el-select>-->
                <!--<i class="el-icon-warning ic-tip-yellow ml-10"></i>-->
                <!--</el-form-item>-->
                <!--</el-row>-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="社保数据源:" prop="socialDatasource"
                                  :rules="[{ required: true, message: '请选择社保数据源'}]">
                      <el-select v-model="saveFormData.socialDatasource" placeholder="表格导入">
                        <el-option v-for="(item,index) in socialSources" :key="item.dictCode" :label="item.dictName" :value="item.dictCode"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="公积金数据源:" prop="accfundDatasource"
                                  :rules="[{ required: true, message: '请选择公积金数据源'}]">
                      <el-select v-model="saveFormData.accfundDatasource" placeholder="请选择活动区域">
                        <el-option v-for="(item,index) in accfundSources" :key="item.dictCode" :label="item.dictName" :value="item.dictCode"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="社保扣除月份:" prop="socialMonth" :rules="[{ required: true, message: '请选择社保扣除月份'}]">
                      <el-select v-model="saveFormData.socialMonth" placeholder="上月">
                        <el-option v-for="(item,index) in socialMonth" :key="item.dictCode" :label="item.dictName" :value="item.dictCode"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="公积金扣除月份:" prop="accfundMonth"
                                  :rules="[{ required: true, message: '请选择公积金扣除月份'}]">
                      <el-select v-model="saveFormData.accfundMonth" placeholder="上月">
                        <el-option v-for="(item,index) in accfundMonth" :key="item.dictCode" :label="item.dictName" :value="item.dictCode"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="薪酬项设置" name="tab1">
          <div class="salaryRules">
            <div class="type-list">
              <div class="clearfix">
                <p class="fl type-title lh-com">应发工资 = <span v-text="saveFormData.payableFormula"></span></p>
                <div class="operate-btns fr">
                  <el-button type="primary" class="fr add-field-btn mt-0" @click="addDialogVisible=true"><i
                    class="ic-circle-plus el-icon-circle-plus-outline"></i>添加子项
                  </el-button>
                </div>
              </div>
              <dTable :data="payableItems" :paging="false" :cancelMinHeight="true">
                <el-table-column
                  prop="name"
                  label="项目名"
                  header-align="center" align="left"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="property"
                  header-align="center" align="left"
                  label="属性"
                  width="200">
                  <template slot-scope="scope">
                    <p v-html="scope.row.property==1?'<span><i class=\'el-icon-circle-plus-outline text-blue\'></i> 税前加项</span>':'<span><i class=\'el-icon-remove-outline text-red\'></i> 税前减项</span>'"></p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="formula"
                  header-align="center" align="left"
                  label="公式">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200" header-align="center" align="center">
                  <template slot-scope="scope">
                    <div class="table-operate-btns">
                      <el-button type="text" v-if="scope.row.operType==1" icon="el-icon-edit" class="btn edit-btn" @click="editPayableItem(scope.$index,scope.row)">编辑</el-button>
                      <el-button type="text" icon="el-icon-remove-outline" class="btn text-red remove-btn" @click="delPayableItem(scope.$index)">移除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </dTable>
          </div>
            <div class="type-list mt-40">
              <div class="clearfix">
                <p class="fl type-title lh-com">实发工资 = <span ref="actualFormula" v-text="saveFormData.actualFormula"></span></p>
                <div class="operate-btns fr">
                  <el-button type="primary" class="fr add-field-btn mt-0" @click="reduceDialogVisible=true"><i
                    class="ic-circle-plus el-icon-circle-plus-outline"></i>添加子项
                  </el-button>
                </div>
              </div>
              <dTable :data="actualItems" :paging="false" :cancelMinHeight="true">
              <el-table-column
                prop="name"
                label="项目名"
                header-align="center" align="left"
                width="200">
              </el-table-column>
              <el-table-column
                prop="property"
                header-align="center" align="left"
                label="属性"
                width="200">
                <template slot-scope="scope">
                  <p v-html="scope.row.property==1?'<span><i class=\'el-icon-circle-plus-outline text-blue\'></i> 税后加项</span>':'<span><i class=\'el-icon-remove-outline text-red\'></i> 税后减项</span>'"></p>
                </template>
              </el-table-column>
              <el-table-column
                prop="formula"
                header-align="center" align="left"
                label="公式">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200" header-align="center" align="center">
                <template slot-scope="scope">
                  <div class="table-operate-btns">
                    <el-button type="text" v-if="scope.row.operType==1" icon="el-icon-edit" class="btn edit-btn" @click="editActualItem(scope.$index,scope.row)">编辑</el-button>
                    <el-button type="text" icon="el-icon-remove-outline" class="btn text-red remove-btn" @click="delActualItems(scope.$index)">移除</el-button>
                  </div>
                </template>
              </el-table-column>
            </dTable>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog title="添加税前薪酬项" :visible.sync="addDialogVisible" width="700px"  class="spl-dialog" :closeOnClickModal="false" :before-close="cancelAddProject">
      <el-form ref="addForm" :model="addForm" label-width="80px">
        <el-form-item label="项名称" prop="name" :rules="[{ required: true, message: '请输入项名称'},{validator:this.validNameExist,trigger:'blur'}]">
          <el-select v-model="addForm.name" ref="addFormName" filterable allow-create default-first-option placeholder="请输入项名称" @change="projectNameChange($event,1)">
            <el-option v-for="(item,index) in projects" :key="index" :label="item.name" :value="item.name">
              <span style="float: left;width:90%" @click="fullFormula(item)">{{item.name}}</span>
              <span  v-if="item.deleteType==1" tyle="float: right; color: #F56C6C; font-size: 13px;width:10%" @click.stop="deleProjectItem(item)">
                <span class="text-red">
                  <i class="el-icon-remove"></i>
                </span>
              </span>
            </el-option>
          </el-select>
          <span style="margin-left:80px">
              <span v-if="addForm.property==1">税前加项</span>
              <span v-if="addForm.property==2">税前减项</span>
             <el-switch v-model="addForm.property" :activeColor="$global.switchColor[0]"
                        :inactiveColor="$global.switchColor[1]" :active-value="1"
                        :inactive-value="2" class="ml-5" :disabled="addForm.disabled">
            </el-switch>
            </span>
        </el-form-item>
        <el-form-item label="编辑公式" prop="formula" :rules="[{ required: true, message: '请输入公式'},{validator:this.validFormula,trigger:'blur'}]">
          <el-input type="textarea" v-model="addForm.formula" style="width: 80%;" placeholder="直接输入公式,如:销量 *0.06 " :disabled="addForm.disabled">
          </el-input>
          <el-button type="text" icon="el-icon-delete" class="text-orange clear-btn ml-10" :disabled="addForm.disabled" @click="addForm.formula=''">清空
          </el-button>
          <!-- <el-col :span="6">
             <div class="grid-content bg-purple-light grid-box">
               <div>操作</div>
               <div class="btns">
                 <el-button type="text" icon="el-icon-error" style="color:red">删除</el-button>
                 <el-button type="text" icon="el-icon-delete" style="color:#FF9000">清空</el-button>
               </div>
             </div>
           </el-col>-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer operate-btns-bottom mt-15 pb-15">
        <el-button @click="cancelAddProject">取 消</el-button>
        <el-button type="primary" style="margin-left: 60px;" :loading="addBtnLoading" @click="addProject">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑税前薪酬项" :visible.sync="editDialogVisible" width="700px"  class="spl-dialog"  :closeOnClickModal="false" :before-close="cancelEditProject">
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-form-item label="项名称：">
          <span v-text="editForm.name"></span>
          <span style="margin-left:80px">
              <span v-if="editForm.property==1">税前加项</span>
              <span v-if="editForm.property==2">税前减项</span>
             <el-switch v-model="editForm.property" :activeColor="$global.switchColor[0]"
                        :inactiveColor="$global.switchColor[1]" :active-value="1"
                        :inactive-value="2" class="ml-5">
            </el-switch>
            </span>
        </el-form-item>
        <el-form-item label="编辑公式" prop="formula" :rules="[{ required: true, message: '请输入公式'},{validator:this.validFormula,trigger:'blur'}]">
          <el-input type="textarea" v-model="editForm.formula" style="width: 80%;" placeholder="直接输入公式,如:销量 *0.06 ">
          </el-input>
          <el-button type="text" icon="el-icon-delete" class="text-orange clear-btn ml-10" @click="editForm.formula=''">清空
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer operate-btns-bottom mt-15 pb-15">
        <el-button @click="cancelEditProject">取 消</el-button>
        <el-button type="primary" style="margin-left: 60px;" :loading="editBtnLoading" @click="editProject">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加税后薪酬项" :visible.sync="reduceDialogVisible" width="700px"  class="spl-dialog" :before-close="cancelReduceProject">
      <el-form ref="reduceForm" :model="reduceForm" label-width="80px">
        <el-form-item label="项名称" prop="name" :rules="[{ required: true, message: '请输入项名称'},{validator:this.validReduceNameExist,trigger:'blur'}]">
          <el-select v-model="reduceForm.name" ref="reduceFormName" filterable allow-create default-first-option placeholder="请输入项名称" @change="projectNameChange($event,2)">
            <el-option v-for="(item,index) in projects" :key="index" :label="item.name" :value="item.name">
              <span style="float: left;width:90%" @click="fullReduceFormula(item)">{{item.name}}</span>
              <span  v-if="item.deleteType==1" tyle="float: right; color: #F56C6C; font-size: 13px;width:10%" @click.stop="deleProjectItem(item)">
                <span class="text-red">
                   <i class="el-icon-remove"></i>
                </span>
              </span>
            </el-option>
          </el-select>
          <span style="margin-left:80px">
              <span v-if="reduceForm.property==1">税后加项</span>
              <span v-if="reduceForm.property==2">税后减项</span>
             <el-switch v-model="reduceForm.property" :activeColor="$global.switchColor[0]"
                        :inactiveColor="$global.switchColor[1]" :active-value="1"
                        :inactive-value="2" class="ml-5" :disabled="reduceForm.disabled">
            </el-switch>
            </span>
        </el-form-item>
        <el-form-item label="编辑公式" prop="formula" :rules="[{ required: true, message: '请输入公式'},{validator:this.validFormula,trigger:'blur'}]">
          <el-input type="textarea" v-model="reduceForm.formula" style="width: 80%;" placeholder="直接输入公式,如:销量 *0.06 " :disabled="reduceForm.disabled">
          </el-input>
          <el-button type="text" icon="el-icon-delete" class="text-orange clear-btn ml-10" :disabled="reduceForm.disabled" @click="reduceForm.formula=''">清空
          </el-button>
          <!-- <el-col :span="6">
             <div class="grid-content bg-purple-light grid-box">
               <div>操作</div>
               <div class="btns">
                 <el-button type="text" icon="el-icon-error" style="color:red">删除</el-button>
                 <el-button type="text" icon="el-icon-delete" style="color:#FF9000">清空</el-button>
               </div>
             </div>
           </el-col>-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer operate-btns-bottom mt-15 pb-15">
        <el-button @click="cancelReduceProject">取 消</el-button>
        <el-button type="primary" style="margin-left: 60px;" :loading="reduceBtnLoading" @click="addReduceProject">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑税后薪酬项" :visible.sync="editReduceDialogVisible" width="700px"  class="spl-dialog" :before-close="cancelEditReduceProject">
      <el-form ref="editReduceForm" :model="editReduceForm" label-width="80px">
        <el-form-item label="项名称：">
          <span v-text="editReduceForm.name"></span>
          <span style="margin-left:80px">
              <span v-if="editReduceForm.property==1">税后加项</span>
              <span v-if="editReduceForm.property==2">税后减项</span>
             <el-switch v-model="editReduceForm.property" :activeColor="$global.switchColor[0]"
                        :inactiveColor="$global.switchColor[1]" :active-value="1"
                        :inactive-value="2" class="ml-5">
            </el-switch>
            </span>
        </el-form-item>
        <el-form-item label="编辑公式" prop="formula" :rules="[{ required: true, message: '请输入公式'},{validator:this.validFormula,trigger:'blur'}]">
          <el-input type="textarea" v-model="editReduceForm.formula" style="width: 80%;" placeholder="直接输入公式,如:销量 *0.06 ">
          </el-input>
          <el-button type="text" icon="el-icon-delete" class="text-orange clear-btn ml-10" @click="editForm.formula=''">清空
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer operate-btns-bottom mt-15 pb-15">
        <el-button @click="cancelEditReduceProject">取 消</el-button>
        <el-button type="primary" style="margin-left: 60px;" :loading="editReduceBtnLoading" @click="editReduceProject">确 定</el-button>
      </div>
    </el-dialog>

    <div class="operate-btns-bottom mt-30">
      <el-button class="cancel-btn-border" @click="reload">取消</el-button>
      <el-button type="primary" class="ml-30" :loading="saveBtnLoading" @click="saveData">确认保存</el-button>
    </div>
  </div>
</template>
<script>
import dTable from '../../../components/common/table'
export default {
  components: { dTable },
  data () {
    return {
      // 导航
      pathData: [
        { name: '薪酬管理' },
        { name: '设置薪酬规则' }
      ],
      active: 'tab0',
      addDialogVisible: false,
      editDialogVisible: false,
      reduceDialogVisible: false,
      editReduceDialogVisible: false,
      addBtnLoading: false,
      editBtnLoading: false,
      editReduceBtnLoading: false,
      reduceBtnLoading: false,
      addForm: {
        name: '',
        property: 1,
        formula: '',
        type: 1,
        disabled: false
      },
      editForm: {

      },
      reduceForm: {
        name: '',
        property: 1,
        formula: '',
        type: 2,
        disabled: false
      },
      editReduceForm: {

      },
      saveFormData: {
        accfundDatasource: '',
        accfundMonth: "",
        actualFormula: "",
        payableFormula: "",
        socialDatasource: "",
        socialMonth: ""
      },
      ruleSettingInfo: {},
      socialSources: [],
      socialMonth: [],
      accfundSources: [],
      accfundMonth: [],
      dataKey: {
        socialSourceKey: '80003',
        socialMonthKey: '80002',
        accfundSourceKey: '80005',
        accfundMonthKey: '80004',
      },
      actualDefaultItems: [],//实发默认薪酬项
      actualItems: [],//实发非默认薪酬项
      payableDefaultItems: [],//应发默认薪酬项
      payableItems: [],//应发非默认薪酬项
      form: {},
      projects: [],//薪酬项
      formulaProject: [],
      saveBtnLoading: false
    }
  },
  created () {
    this.$nextTick(() => {
      this.getDataDicts(this.dataKey.socialSourceKey)
      this.getDataDicts(this.dataKey.accfundSourceKey)
      this.getDataDicts(this.dataKey.socialMonthKey)
      this.getDataDicts(this.dataKey.accfundMonthKey)
      this.getRuleSettings()
      this.getProjects()
    })
  },
  computed: {

  },
  watch: {
    projects: function (newVal, oldVal) {
      this.formulaProject = []
      newVal.forEach(item => {
        this.formulaProject.push(item.name)
      })
    },
    payableItems: function (newVal, oldVal){
      var result = []
      var i=0
      this.payableDefaultItems.forEach(item => {
        if(item.property===1){
          if(i!=0){
            result.push('+')
          }
        }else{
          result.push('-')
        }
        result.push(item.name)
        i++
      })
      newVal.forEach(item => {
        if(item.property===1){
          if(i!=0){
            result.push('+')
          }
        }else{
          result.push('-')
        }
        result.push(item.name)
        i++
      })
      this.saveFormData.payableFormula = result.join("")
    },
    actualItems: function (newVal, oldVal){
      var result = []
      var i=0
      this.actualDefaultItems.forEach(item => {
        if(item.property===1){
          if(i!=0){
            result.push('+')
          }
        }else{
          result.push('-')
        }
        result.push(item.name)
        i++
      })
      newVal.forEach(item => {
        if(item.property===1){
          if(i!=0){
            result.push('+')
          }
        }else{
          result.push('-')
        }
        result.push(item.name)
        i++
      })
      this.saveFormData.actualFormula = result.join("")
    }
  },
  filters: {
  },
  methods: {
    reload (){
      window.location.reload()
    },
    //获取现有的薪酬项
    getRuleSettings (){
      this.$http({
        url: '/salary/ruleSetting',
        method: 'get',
        params: {}
      }).then(({data}) => {
        this.ruleSettingInfo = data
        var actualShowItems = this.parseIsShowItems(data.actualDefaultItems)
        this.actualDefaultItems = this.sortArray(actualShowItems.notShows)
        var actualItems = data.actualItems.concat(actualShowItems.shows)
        this.actualItems = this.sortArray(actualItems)

        var payableShowItems = this.parseIsShowItems(data.payableDefaultItems)
        this.payableDefaultItems = this.sortArray(payableShowItems.notShows)
        var payableItems = data.payableItems.concat(payableShowItems.shows)
        this.payableItems = this.sortArray(payableItems)
        this.saveFormData.accfundDatasource = data.accfundDatasource
        this.saveFormData.accfundMonth = data.accfundMonth
        this.saveFormData.socialDatasource = data.socialDatasource
        this.saveFormData.socialMonth = data.socialMonth
      })
    },
    parseIsShowItems (items){
      var shows = []
      var notShows = []
      items.forEach(item => {
        if(item.isShow === 1){
          shows.push(item)
        }else {
            notShows.push(item)
        }
      })
      return {shows:shows,notShows:notShows}
    },
    sortArray (array){
      var array = array.sort(function (a, b) {
        return a.property - b.property;
      })
      return array
    },
    getDataDicts(dataKey) {
      this.$http({
        url: 'sys/list/dicts/' + dataKey,
        method: 'get',
        parmas: {}
      }).then(({data}) => {
        if(dataKey === this.dataKey.socialSourceKey){
          this.socialSources = data.data.dictionaries
        }
        else if(dataKey === this.dataKey.accfundSourceKey){
          this.accfundSources = data.data.dictionaries
        }
        else if(dataKey === this.dataKey.socialMonthKey){
          this.socialMonth = data.data.dictionaries
        }
        else if(dataKey === this.dataKey.accfundMonthKey){
          this.accfundMonth = data.data.dictionaries
        }
      })
    },
    //获取所有的薪酬项
    getProjects (name){
      this.$http({
        url: '/salary/ruleSetting/salaryItems',
        method: 'get',
        params: {
            name: name
        }
      }).then(({data}) => {
        this.projects = data
      })
    },
    //校验薪酬项的公式是否争取
    validFormula(rule, value, callback){
      if(value!=null && value!=''){
        var texts = this.formulaProject
        this.filterChinese(value,texts)
        var valid = this.$global.checkFormula(value,texts)
        if(!valid){
          callback(new Error('检测公式有误，请检查'))
        }else{
          callback()
        }
      }else{
        callback()
      }
    },
    //校验项目名称是否存在，存在就不予许新增形同的薪酬项
    validNameExist (rule, value, callback){
      if(value!=null && value!=''){
        var valid = true
        var payableItems = this.$global.deepcopyArray(this.payableItems)
        var defaultItems = this.$global.deepcopyArray(this.payableDefaultItems)
        var itemsAll = payableItems.concat(defaultItems)
        itemsAll.forEach(item =>{
            if(item.name === value){
              valid = false
            }
        })
        if(!valid){
          callback(new Error('项名称已存在'))
        }else{
          callback()
        }
      }else{
        callback()
      }
    },
    validReduceNameExist (rule, value, callback){
      if(value!=null && value!=''){
        var valid = true
        var actualItems = this.$global.deepcopyArray(this.actualItems)
        var defaultItems = this.$global.deepcopyArray(this.actualDefaultItems)
        var itemsAll = actualItems.concat(defaultItems)
        itemsAll.forEach(item =>{
          if(item.name === value){
            valid = false
          }
        })
        if(!valid){
          callback(new Error('项名称已存在'))
        }else{
          callback()
        }
      }else{
        callback()
      }
    },
    fullReduceFormula (ptojectItem){
      this.reduceForm.formula = ptojectItem.formula
    },
    fullFormula (ptojectItem){
        this.addForm.formula = ptojectItem.formula
    },
    //从公式中抽取中文的公式项
    filterChinese(formulaText,texts){
      formulaText = formulaText.replace(/\+/g,"|")
      formulaText = formulaText.replace(/\-/g,"|")
      formulaText = formulaText.replace(/\*/g,"|")
      formulaText = formulaText.replace(/\//g,"|")
      var reg = new RegExp('[\u4e00-\u9fa5]+$','g');
      var formulas =  formulaText.split("|")
      formulas.forEach(item => {
        var matchTexts = item.match(/[\u4e00-\u9fa5]/g);
        if(matchTexts!=null && matchTexts.length==item.length){
          if(this.formulaProject.indexOf(matchTexts.join(""))<0){
            texts.push(matchTexts.join(""))
          }
        }

      })
    },
    editPayableItem (index,row){
      this.editForm = this.$global.deepcopyArray([row])[0]
      this.editForm.index = index
      this.editDialogVisible = true
    },
    editActualItem (index,row){
      this.editReduceForm = this.$global.deepcopyArray([row])[0]
      this.editReduceForm.index = index
      this.editReduceDialogVisible = true
    },
    delPayableItem(index){
      this.$confirm('移除薪酬项，需点击确定保存后才能生效薪酬规则，是否确定移除？', '提示', {
        confirmButtonText: '是，我想移除',
        cancelButtonText: '不，我再想想',
        type: 'warning',
        center: true
      }).then(() => {
        this.payableItems.splice(index,1)
      })
    },
    delActualItems(index){
      this.$confirm('移除薪酬项，需点击确定保存后才能生效薪酬规则，是否确定移除？', '提示', {
        confirmButtonText: '是，我想移除',
        cancelButtonText: '不，我再想想',
        type: 'warning',
        center: true
      }).then(() => {
        this.actualItems.splice(index,1)
      })
    },
    //保存薪酬项
    addProject (){
      this.$refs.addForm.validate((valid) => {
        if(valid){
          this.addBtnLoading = true
          this.$http({
            url: '/salary/ruleSetting/salaryItems',
            method: 'post',
            data: this.addForm
          }).then(({data}) => {
            if(data.code ==0){
              this.payableItems.push(data.data)
              this.addBtnLoading = false
              this.cancelAddProject()
              this.getProjects()//刷新薪酬项
            }else{
              this.addBtnLoading = false
              this.$message({
                message: "系统异常",
                type: 'error'
              })
            }
          })
        }
      })
    },
    editProject (){
      this.$refs.editForm.validate((valid) => {
        if(valid){
          this.editBtnLoading = true
          this.$http({
            url: '/salary/ruleSetting/salaryItems/'+this.editForm.code,
            method: 'post',
            data: this.editForm
          }).then(({data}) => {
            if(data.code ==0){
              this.editBtnLoading = false
              this.payableItems[this.editForm.index] = this.editForm
              var deepCopy = this.$global.deepcopyArray(this.payableItems);
              this.payableItems = []
              this.payableItems = deepCopy
              this.cancelEditProject()
              this.getProjects()//刷新薪酬项
            }else{
              this.editBtnLoading = false
              this.$message({
                message: "系统异常",
                type: 'error'
              })
            }
          })
        }
      })
    },
    editReduceProject (){
      this.$refs.editReduceForm.validate((valid) => {
        if(valid){
          this.editReduceBtnLoading = true
          this.$http({
            url: '/salary/ruleSetting/salaryItems/'+this.editReduceForm.code,
            method: 'put',
            data: this.editReduceForm
          }).then(({data}) => {
            if(data.code ==0){
              this.editReduceBtnLoading = false
              this.actualItems[this.editReduceForm.index] = this.editReduceForm
              var deepCopy = this.$global.deepcopyArray(this.actualItems);
              this.actualItems = []
              this.actualItems = deepCopy
              this.cancelEditReduceProject()
              this.getProjects()//刷新薪酬项
            }else{
              this.editReduceBtnLoading = false
              this.$message({
                message: "系统异常",
                type: 'error'
              })
            }
          })
        }
      })
    },
    cancelEditProject (done){
      if(typeof done === 'function'){
          done()
      }else{
          this.editDialogVisible = false
      }
    },
    cancelEditReduceProject (done){
      if(typeof done === 'function'){
        done()
      }else{
        this.editReduceDialogVisible = false
      }
    },
    cancelAddProject (done){
      this.addForm = {
        name: '',
        property: 1,
        formula: '',
        type: 1
      }
      this.$refs.addForm.resetFields()
      if(typeof done === 'function'){
          done()
      }else{
        this.addDialogVisible=false
      }
    },
    deleProjectItem(item){
      this.$confirm('是否确认删除未被引用的薪酬项{'+item.name+'}？', '提示', {
        confirmButtonText: '是，我想移除',
        cancelButtonText: '不，我再想想',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: '/salary/ruleSetting/salaryItems/'+item.code,
          method: 'delete'
        }).then(({data}) => {
          if(data.code == 0){
            this.getProjects()//刷新薪酬项
            //页面需要删除应发自定义项和实发自定义项
            this.refreshPayable(item)
            this.refreshActual(item)
          }else {
            this.$message({
              message: "系统异常",
              type: 'error'
            })
          }
        })
      })
    },
    refreshPayable (item){
      var array = [];
      this.payableItems.forEach(it => {
        if (it.name !== item.name) {
          array.push(it)
        }
      })
      this.payableItems = []
      this.payableItems = array
    },
    refreshActual (item){
      var array = [];
      this.actualItems.forEach(it => {
        if (it.name !== item.name) {
          array.push(it)
        }
      })
      this.actualItems = []
      this.actualItems = array
    },
    addReduceProject (){
      this.$refs.reduceForm.validate((valid) => {
        if(valid){
          this.reduceBtnLoading = true
          this.$http({
            url: '/salary/ruleSetting/salaryItems',
            method: 'post',
            data: this.reduceForm
          }).then(({data}) => {
            if(data.code ==0){
              this.actualItems.push(data.data)
              this.reduceBtnLoading = false
              this.cancelReduceProject()
              this.getProjects()//刷新薪酬项
            }else{
              this.reduceBtnLoading = false
              this.$message({
                message: "系统异常",
                type: 'error'
              })
            }
          })
        }
      })
    },
    projectNameChange (selectValue,type){
      var project = this.getProjectByName(selectValue)
      if(project!=null && project.operType === 2){
        if(type === 2 ){
          this.reduceForm.disabled = true
        }else {
            this.addForm.disabled = true
        }
      }else{
        if(type === 2 ){
          this.reduceForm.disabled = false
        }else {
          this.addForm.disabled = false
        }
      }
    },
    getProjectByName (name){
      var project = null
      this.projects.forEach(item => {
          if(item.name === name){
            project = item
          }
      })
      return project
    },
    cancelReduceProject (done){
      this.reduceForm = {
        name: '',
        property: 1,
        formula: '',
        type: 2
      }
      this.$refs.reduceForm.resetFields()
      if(typeof done === 'function'){
        done()
      }else{
        this.reduceDialogVisible=false
      }
    },
    handleClick (){

    },
    toAddDataForm (){

    },
    // 保存
    saveData () {
      this.saveBtnLoading = true
      this.$refs.saveFormData.validate((valid) => {
        if (valid) {
          this.$http({
            url: '/salary/ruleSetting',
            method: 'post',
            data: this.saveFormData
          }).then(({data}) => {
            this.saveBtnLoading = false
            if(data.code == 0){
              this.$message({
                message: "保存成功",
                type: 'success',
                duration: 1000,
                onClose: function () {
                  window.location.reload()
                }
              })
            }else{
              this.$message({
                message: "系统异常",
                type: 'error'
              })
            }
          })

        } else {
          this.active = 'tab0'
          this.saveBtnLoading = false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .spl-container{
    height: 100%;
    .emp-tabs{
      height: calc(~"100% - 90px");
    }
    .type-list{
      .operate-btns{
        padding-top: 0;
        padding-bottom: 0;
      }
      .type-title{
        padding: 0 10px;
        border-left: 3px solid #328EDB;
      }
    }
    .salaryRules{
      padding: 15px;
    }
  }
</style>
<style lang="less">
  .salaryRules-container {
  .clear-btn {
    padding-bottom: 20px;
  }

  .clear-btn:hover, .clear-btn:active {
    color: #FF6600;
  }
    .remove-btn:hover, .remove-btn:active{
      color: #F56C6C;
    }
  }
</style>
